<template>
  <div class="views-container">
    <div class="wlm-form">
      <div class="wlm-form-header flex-row flex-justify-b">
        备货日期：{{$route.query.stockTime}}
        <div>
           <el-button  plain icon="document"  :data-query="JSON.stringify(tableFormatData.stockDetail.files)"  v-exceldown="{path:'stockDetail&',query: {export:1,stockTime:$route.query.stockTime,type:2}}">{{$t('excel.export')+'(团长分组)' }}</el-button>
         <el-button  plain icon="document"  :data-query="JSON.stringify(tableFormatData.stockDetail.files)"  v-exceldown="{path:'stockDetail&',query: {export:1,stockTime:$route.query.stockTime}}"> {{$t('excel.export')+'(商品分组)'}}</el-button>
        </div>
      </div>
      <div class="wlm-content">
        <div v-for="(item,index) in tableFormatData.stockDetail.tableData" :key="index" v-if="tableFormatData.stockDetail.tableData.length>0">

          <div class="title flex-row flex-justify-b">
            <div v-if="item.supplier_img.length>0">
              <img :src="item.supplier_img[0].file_path" alt="这是图片" width="50px" style="verticel:middle;">
              {{item.name}}
            </div>
            <div v-if="item.is_yes==2">
              <el-button type="primary" @click="setparams(item,1);confirmStock();">批量确认备货</el-button>
              <el-button type="primary" @click="dialogVisible=true;setparams(item,2);">批量延期备货</el-button>
            </div>
          </div>
          <el-table :data="item.goods" style="width: 100%" default-expand-all>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div v-for="(item1,index1) in scope.row.reg_lists" :key="index1" class="text-box">
                  <span>团长：{{item1.reg_name}}</span>
                  <span>地址：（{{item1.address&&item1.address.detail?item1.address.detail:'-'}}）</span>
                  <span>{{item1.total_num}}件</span>
                </div>

              </template>
            </el-table-column>
            <el-table-column prop="goods_img" label="商品LOGO">
              <template slot-scope="scope">
                <img :src="scope.row.goods_img" alt="" width="50px">
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="total_num" label="数量">
            </el-table-column>
            <el-table-column prop="pay_price" label="支付金额">
            </el-table-column>
            <el-table-column prop="reg_money" label="团长佣金">
            </el-table-column>
            <el-table-column prop="platform_money" label="平台分成">
            </el-table-column>
            <el-table-column prop="supplier_money" label="供应商应得">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="operation-group">
                  <el-button type="text" v-if="scope.row.is_yes ==2" @click="paramsObj={stockTime:$route.query.stockTime,goods_id:[scope.row.goods_id],status:1,supplier_id:item.s_id};confirmStock();">确认备货</el-button>
                  <span v-if="scope.row.is_yes ==1">已确认</span>
                  <div class="btn-line"></div>
                  <el-button class="wlm-text" type="text" v-if="scope.row.is_yes ==2"  @click="paramsObj={stockTime:$route.query.stockTime,goods_id:[scope.row.goods_id],status:2,supplier_id:item.s_id};dialogVisible = true;">延期备货</el-button>
                  <span v-if="scope.row.is_yes !==1 && scope.row.is_yes !==2">-</span>
                </div>
              </template>

            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" >
      <div>
        <span style="display:inline-block;margin-right:10px;">延期时间:</span>
       <el-date-picker  :picker-options="pickerOptions" v-model="time" type="date" placeholder="请选择日期" value-format="timestamp"></el-date-picker>
      </div>
      <div style="display:flex;margin-top:20px;">
        <span style="display:inline-block;margin-right:10px;">延期备注:</span>
       <el-input type="textarea"  v-model="delay_text" placeholder="请输入延期备注"></el-input>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false;paramsObj.delay_time =time;stock();">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { stockDetail, detailConfirmStock } from '@/api/commityBuy'
// import mixins from '@/mixins/mixins'
import exceldown from '@/directive/exceldown'
export default {
  // mixins: [mixins.getters('Table')],

  data() {
    const time1 = this.$route.query.stockTime
    return {
      delay_text: '',
      pickerOptions: {

        disabledDate(time) {
          return time.getTime() <= new Date(time1).getTime()
        } },
      dialogVisible: false,
      time: '',
      data: [{
        supplierlogo: '',
        supplierName: '',
        children: [{
          logo: '11',
          name: '11',
          number: '111',
          leaderIncome: '11',
          platformIncome: '11',
          supplyIncome: '11',
          leaderList: [
            { name: '1', address: '11', number: '1' },
            { name: '1', address: '11', number: '1' }
          ]

        }, {
          logo: '22',
          name: '22',
          number: '111',
          leaderIncome: '22',
          platformIncome: '22',
          supplyIncome: '22',
          leaderList: [
            { name: '1', address: '11', number: '1' },
            { name: '1', address: '11', number: '1' }
          ]

        }]

      }, {
        supplierlogo: '',
        supplierName: '222',
        children: [{
          logo: '11',
          name: '11',
          number: '111',
          leaderIncome: '11',
          platformIncome: '11',
          supplyIncome: '11',
          leaderList: [
            { name: '1', address: '11', number: '1' },
            { name: '1', address: '11', number: '1' }
          ]

        }, {
          logo: '22',
          name: '22',
          number: '111',
          leaderIncome: '22',
          platformIncome: '22',
          supplyIncome: '22',
          leaderList: [
            { name: '1', address: '11', number: '1' },
            { name: '1', address: '11', number: '1' }
          ]

        }]

      }],
      tableFormatData: {
        current: 'stockDetail',
        stockDetail: {
          key: 'stockDetail',
          api: {
            getList: 1,
            delList: ''

          },
          tableData: [],
          files: {
            stockTime: this.$route.query.stockTime
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }

      },
      paramsObj: {}
    }
  },
  directives: {
    exceldown
  },
  created() {
    this.getStockDetial()
  },
  methods: {
    stock() {
      this.paramsObj.delay_text = this.delay_text
      detailConfirmStock(this.paramsObj).then(res => {
        this.getStockDetial()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    confirmStock() {
      this.$confirm('是否继续备货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.stock()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    setparams(item, status) {
      this.paramsObj = { stockTime: this.$route.query.stockTime, goods_id: [], status: status, supplier_id: item.s_id }
      item.goods.forEach((item1, index) => {
        item.is_yes == 2 ? this.paramsObj.goods_id.push(item1.goods_id) : ''
      })
    },
    getStockDetial() {
      stockDetail({ stockTime: this.$route.query.stockTime }).then(res => {
        console.log('res.data.data', res.data.data)
        this.tableFormatData.stockDetail.tableData = res.data.data
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.title {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  margin-top: 30px;
}
/deep/ .el-table__expand-column .cell {
  display: none;
}

.text-box {
  span {
    display: inline-block;
    margin: 5px;
    &:nth-last-child(1) {
      font-weight: bold;
      color: red;
      font-size: 16px;
    }
  }
}
</style>
